<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/public/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
 <%@ include file="/WEB-INF/page/public/contentmeta.jsp"%>
  <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="/css/global.css" media="all" />
    <link rel="stylesheet" href="/css/tab.css" media="all" />
    <link rel="stylesheet" href="/css/tree/zTreeStyle.css" type="text/css">
</head>
<body>

<div class="admin-tab admin-user admin-role">
    <div class="tab-condition">
        <div class="TM-tab-info">
            <a class="layui-btn layui-btn-primary layui-btn-small active  addrole">+添加角色</a>
            <a class="layui-btn layui-btn-primary layui-btn-small  rolebind">+资源绑定</a>
        </div>
    </div>
    <div class="layui-field-box">
        <table class="site-table table-hover TM-user">
            <thead>
            <tr>
                <th style="width:10%;">角色名称</th>
                <th style="width:10%;">角色状态</th>
                <th style="width:10%;">角色描述</th>
                <th style="width:10%;">角色类型</th>
                <th style="width:10%;">创建时间</th>
                <th style="width:10%;">修改时间</th>
                <th style="width:10%;">修改人</th>
                <th style="width:15%;">备注</th>
                <th style="width:15%;">操作</th>
            </tr>
            </thead>
            <tbody>
             <c:forEach var="rolelist" items="${pager.resultList}">
				<tr>
					<td>${rolelist.name}</td>
					<c:if test="${rolelist.state==0}">
						<td>启用</td>
					</c:if>
					<c:if test="${rolelist.state==1}">
						<td>禁用</td>
					</c:if>
					<td>${rolelist.description}</td>
					<c:if test="${rolelist.type==1}">
						<td>超级管理员</td>
					</c:if>
					<c:if test="${rolelist.type==2}">
						<td>管理员</td>
					</c:if>
					<c:if test="${rolelist.type==3}">
						<td>普通用户</td>
					</c:if>
					<td>${rolelist.createdate}</td>
					<td>${rolelist.updatedate}</td>
					<td>${rolelist.updateuser}</td>
					<td>${rolelist.remark}</td>
					  <td>
	                    <button class="layui-btn layui-btn-primary layui-btn-small roleedit"  data="${rolelist.id}"><i class="layui-icon "></i></button>
	                  <%--   <button class="layui-btn layui-btn-primary layui-btn-small roleture" data="${rolelist.id}"><i class="layui-icon "></i></button>
	                    <button class="layui-btn layui-btn-primary layui-btn-small rolefalse" data="${rolelist.id}"><i class="layui-icon "></i></button>   --%>
	                </td>
				</tr>
			</c:forEach>
             
            </tbody>
        </table>
        <%-- <div class="admin-table-page">
        	 ${pager.getShowPage() }
            <div id="page" class="page"><div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-0"><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;" data-page="2">2</a><a href="javascript:;" data-page="3">3</a><a href="javascript:;" data-page="4">4</a><a href="javascript:;" data-page="5">5</a><span>…</span><a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="25">末页</a><a href="javascript:;" class="layui-laypage-next" data-page="2">下一页</a></div></div>
        </div> --%>
    </div>
</div>


<!-- 添加角色 -->
<div class="layui-form-item" id="validateadd-formDiv" style="width:90%;margin-top:20px;display:none">
<form  class="layui-form clefix" action="" id="validateadd-form" method="post">
	<div class="layui-form-item">
	  <div class="layui-inline">
	    <label class="layui-form-label">角色名称</label>
	    <div class="layui-input-inline" style="width: 100px;">
	      <input id="name" 	name="name" type="text" placeholder="" autocomplete="off" class="layui-input">
	       <input type="hidden" id="id1" name="id1" />
	    </div>
	    
	    <div class="layui-input-inline">
					 <select id="state" name="state">
				<option value="0">启用</option>
				<option value="1">禁用</option>
			</select>
		 </div>  
	  </div>
	  <div class="layui-inline">
	    <div class="layui-input-inline" style="width: 180px;">
	    	<select id="type" name="type"
				class="form-control">
				<option value="1">超级管理员</option>
				<option value="2">管理员</option>
				<option value="3">普通用户</option>
			</select>
	    </div>
	  </div> 
	   <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">描述</label>
	    <div class="layui-input-block">	 
	      <textarea   placeholder="请输入内容" id="description" name="description" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">备注</label>
	    <div class="layui-input-block">	 
	      <textarea   placeholder="请输入内容"  id="remark" name="remark"  class="layui-textarea"></textarea>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>  
	</div>
</form>
</div>


<div class="layui-form-item" id="validatebound-formDiv" style="width:90%;margin-top:20px;display:none">
	<form  class="layui-form clefix" action="" id="validatebound-form" method="post">
		<div class="layui-form-item">
		    <label class="layui-form-label">角色</label>
		    <div class="layui-input-block">
		          	<select id="rolename" name="rolename"  lay-filter="rolename"   > 				
						<c:forEach var="role" items="${pager.resultList}">
						     <option  value="${role.id}">${role.name}</option>
						</c:forEach> 
					</select>
		    </div>
		  </div>
		  <div class="layui-form-item">
		  	      <label class="layui-form-label">菜单</label>
		  		<div class="zTreeDemoBackground layui-input-block">
					<ul id="treeDemo" class="ztree"></ul>
				</div> 
		  </div>
		   <div class="layui-form-item">
	    	<div class="layui-input-block">
	     		 <button class="layui-btn" lay-submit  lay-filter="rolebindsubmit">保存</button>
		    </div>
		  </div>  
	</form>
</div>



 
<!-- 添加角色 -->


<script type="text/javascript" src="/js/tree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/js/tree/jquery.ztree.excheck-3.5.js"></script>


<script>
   
    layui.use(['icheck','element','laypage','form'], function() {
        var $ = layui.jquery,
                laypage = layui.laypage; 
        var form = layui.form();
    	$('.addrole').on('click', function() {
    		$('#validateadd-form').trigger("reset") 
			layer.open({
				title: '添加角色',
				maxmin: true,
				type: 1,
				content:  $('#validateadd-formDiv'),
				area: ['900px', '450px']
			});
		});
    	
    	//下拉框change
    	form.on('select(rolename)', function(data){
    		boundcld();
    	});
    	
    	form.on('submit(rolebindsubmit)', function(data){
    		  addroleitme();
    		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    	 });
    	
    	
    	
    	$('.rolebind').on('click', function() {
    		boundcld();
    		layer.open({
				title: '资源绑定',
				maxmin: true,
				type: 1,
				content:  $('#validatebound-formDiv'),
				area: ['500px', '600px']
			});
    	});
    	$(".roleedit").on('click', function() {
    		var id = $(this).attr("data");
    		updatecld({id:id})
    		layer.open({
				title: '修改角色',
				maxmin: true,
				type: 1,
				content:  $('#validateadd-formDiv'),
				area: ['900px', '450px']
			});
    	});  
    });
    
    
    
    
    
    
    
    $(function(){ 
   	 $("#validateadd-form").validate({
   		 rules: {
   		    	name: "required",
   		      },
   		      messages: {
   		    	  name: "请输入角色名称",
   		      },
   		   errorPlacement: function(error, element) {
				layer.tips(error.text(), element, {
					tips: [2,tipColor],
         		 tipsMore: true
         		});
       	},     
   		 submitHandler: function(form) {
   		        var id = $("#id1").val();
   				var name = $("#name").val();
   				var state = $("#state").val();
   				var description = $("#description").val();
   				var type = $("#type").val();
   				var remark = $("#remark").val();
   				var productcategory = getCheckedId();
   				var ajxurl = "/role/saverole";
   				var msg ="添加";
   				if(id.length>0){
   					ajxurl="/role/updaterole";
   						msg ="修改";
   				}
   				$.ajax({
   					type : "POST",
   					url : ajxurl,
   					data : {
   						id:id,
   						name : name,
   						state : state,
   						description : description,
   						type : type,
   						remark : remark,
   						productcategory : productcategory
   					},
   					dataType : "json",
   					success : function(data) {
   						if (data == 0) {
   						     layer.msg(msg+"失败!");
   						} else {
   					    	 layer.msg(msg+'成功', {icon: 1},function(){
   					    	   window.location.href="/role/getrolelist";
   					    	});
   						 
   						}
   					}
   				});
   			 
   	      }
   	 
   	    }); 
   });   

   function getCheckedId(){
   	   var ids = "";
   	  $("[name='checkbox']").each(function(){
   		   if($(this).is(":checked")){
   			     ids +=$(this).val()  +"," 
   		   } 
   	  })
   	 return ids
   }

   function updatecld(f) {
   	$.ajax({
   		type : "POST",
   		url : "/role/getrolebyid",
   		data : { 
   			id : f.id
   		},
   		dataType : "json",
   		success : function(data) {
   			//alert(data.rplist[3].productcategory);
   			$('#validateadd-form').trigger("reset") 
   			$("#id1").val(f.id);
   			$("#name").val(data.name);
   			$("#state").val(data.state);
   			$("#description").val(data.description);
   			$("#type").val(data.type);
   			$("#remark").val(data.remark);
   			 
   		}
   		
   	}); 

   }



   var zTree = null;
   function boundcld() {
   	var zNodes =[]; 
   	var code, log, className = "dark";
   	var rid=$("#rolename").val();
   	var setting = {
   			check: {
   				enable: true
   			},
   			data: {
   				simpleData: {
   					enable: true
   				}
   			}
   	 }; 
 		$.ajax({
 			type : "POST",
 			url : "/systerm/selectsysterm",
 			data : {
 				rid:rid
 			},
 			dataType : "json",
 			async:false,
 			success : function(data) {
 				zNodes = data;
 				
 			}
 			
 		}); 
   	zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
   	
   	zTree.expandAll(true);
   	//$("#myModal2").modal("show");

   }

   function addroleitme(){
   	 
   	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
   	 
   	var nodes = treeObj.getCheckedNodes(true);
   	var v="";
   	 for(var i=0;i<nodes.length;i++){
         v+=nodes[i].id + ","; //获取选中节点的值  
       }
        var rid=$("#rolename").val();
   	
   		$.ajax({
   			type : "POST",
   			url : "/systerm/savasysterm",
   			data : {
   				rid:rid,
   				tids:v
   				
   			},
   			dataType : "json",
   			async:false,
   			success : function(data) {
   				
   				if (data == 0) {
   					layer.msg("绑定失败!");
   				} else {
   				    layer.msg('绑定成功!', {icon: 1},function(){
				    	 //  window.location.href="/role/getrolelist";
				     });
					 
   					/* Notify.suc("绑定成功!",
   							"/role/getrolelist"); */
   				}
   			}
   			
   		});
   	
   }

</script>
  
	<!-- 资源绑定-->
	
	 
</body>

</html>